<template>
    <block v-if="scene == 1154">
        <pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="page bg bg-fff">
            <view class="tabs col-3e font16 flex">
                <block v-for="item in typeList" :key="item.type">
                    <view class="tab flex" :class="{ 'active': type === item.type }" @click="changeType(item)">
                        <text class="txt">{{ item.name }}</text>
                    </view>
                </block>
            </view>

            <view class="formBody">
                <u-form :model="form" ref="uForm" label-width="100">
                    <!-- <u-form-item label="房屋类型" v-if="type === 'second'">
                        <view class="radioWrap flex">
                            <u-radio-group v-model="secType" active-color="#007235">
                                <u-radio label-size="26" v-for="(item, index) in secTypesGroup" :key="index" :name="item.value">
                                    {{item.label}}
                                </u-radio>
                            </u-radio-group>
                        </view>
                    </u-form-item> -->

                    <u-form-item label="购房性质" v-if="houseNature.length > 0">
                        <picker @change="confirmBuyType" :value="houseTypeIndex" range-key="text" :range="houseNature">
                            <view class="itemBody flex col-3e">
                                <text class="bodyTxt right-10">{{ houseNature[houseTypeIndex].text }}</text>
                                <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                            </view>
                        </picker>
                    </u-form-item>

                    <u-form-item label="房屋面积" prop="size">
                        <view class="formItemCon flex">
                            <view class="inpBox">
                                <u-input v-model="form.size" border="none" placeholder="请输入房屋面积" input-align="right" type="digit" />
                            </view>
                            <text class="unit">m²</text>
                        </view>
                    </u-form-item>

                    <u-form-item label="房屋总价" prop="price">
                        <view class="formItemCon flex">
                            <view class="inpBox">
                                <u-input v-model="form.price" border="none" placeholder="请输入房屋总价" input-align="right" type="digit" />
                            </view>
                            <text class="unit">万元</text>
                        </view>
                    </u-form-item>

                    <u-form-item label="是否有电梯" v-if="type === 'new'">
                        <view class="text-right">
                            <u-switch class="switchBtn" slot="right" active-color="#007235"
                                v-model="form.hasLift"></u-switch>
                        </view>
                    </u-form-item>

                    <block v-if="type === 'second'">
                        <u-form-item label="房屋买入价格" prop="buyPrice">
                            <view class="formItemCon flex">
                                <view class="inpBox">
                                    <u-input v-model="form.buyPrice" border="none" placeholder="请输入房屋买入价格" input-align="right" type="digit" />
                                </view>
                                <text class="unit">万元</text>
                            </view>
                        </u-form-item>
                        <view class="font12 col-grey top-5">*买入价格指上次房屋交易价格</view>
                    </block>

                    <u-gap :height="10"></u-gap>

                    <u-form-item label="转让年限" v-if="type === 'second' && secZhuanOptions.length > 0">
                        <picker @change="confirmSecZhuanYears" :value="secYearsIndex" range-key="label"
                            :range="secZhuanOptions">
                            <view class="itemBody flex col-3e">
                                <text class="bodyTxt right-10">{{ secZhuanOptions[secYearsIndex].label }}</text>
                                <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                            </view>
                        </picker>
                    </u-form-item>

                    <u-gap :height="10"></u-gap>

                    <u-form-item label="家庭在沪唯一住宅" label-width="300" v-if="type === 'second' && secOnceOptions.length > 0">
                        <picker @change="confirmSecOnce" :value="secOnceIndex" range-key="label" :range="secOnceOptions">
                            <view class="itemBody flex col-3e">
                                <text class="bodyTxt right-10">{{ secOnceOptions[secOnceIndex].label }}</text>
                                <u-icon name="arrow-right" color="#8A8A8A" size="14"></u-icon>
                            </view>
                        </picker>
                    </u-form-item>
                </u-form>
                <view class="submitBtn bg-theme col-fff font15" @click="submit">开始计算</view>
                <view class="tips font12">
                    注：
                    <view class="">1.本计算结果仅供参考。</view>
                </view>
            </view>
            
            <share-btn :display="scrollAnimate"></share-btn>
        </view>
    </block>
</template>

<script>
import { mapState, mapActions } from 'pinia';
import { useUserInfoStore, useConfigStore } from '@/store/index';
import { isBoolean, getBit } from '@/common/common';
import { calcZengTaxes, calcGeRenTaxes, qiTaxes, weiXiuTaxes } from '@/common/utils/tax-tools';
// import { dispatchClient } from '@/common/api-adviser';
// import { getSellerInfoById } from '@/common/api/adviser';

export default {
    data() {
        return {
            type: 'new',
            typeList: [{
                name: '新房',
                type: 'new'
            }, {
                name: '二手房',
                type: 'second'
            }],

            form: {
                size: null,
                price: null,
                hasLift: true,
                buyPrice: null
            },
            houseTypeIndex: 0,
            houseNature: [{
                text: '首套房',
                value: true
            }, {
                text: '二套房',
                value: false
            }
            ],

            ZENG_TAX_RATIO: 0.0525,//增值税率=1.05x5%
            ZENG_TAX_FUJIA_RATIO: 0.05565,//增值附加税=1.05x5.3%
            secYearsIndex: 0,
            secZhuanOptions: [{
                label: '不满2年',
                value: 'withinTwo'
            }, {
                label: '不满5年满2年',
                value: 'withinFiveOverTwo'
            }, {
                label: '满5年',
                value: 'overFive'
            }],
            secOnceIndex: 0,
            secOnceOptions: [{
                label: '是',
                value: true
            }, {
                label: '否',
                value: false
            }],

            rules: {
                size: [{
                    required: true,
                    message: '请输入房屋面积',
                    trigger: ['change', 'blur'],
                }
                ],
                price: [{
                    required: true,
                    message: '请输入房屋总价',
                    trigger: ['change', 'blur']
                }
                ],
                buyPrice: [{
                    required: true,
                    message: '请输入房屋买入总价',
                    trigger: ['change', 'blur']
                }]
            },
            scrollAnimate: false,
            productId: '',
            title: '',
            share: false,
            start_time: 0,
            recommendAdviser: {}
        }
    },
    computed: {
        ...mapState(useConfigStore, ['scene', 'puid']),
        ...mapState(useUserInfoStore, ['userInfo'])
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    onShareAppMessage(res) {
        return {
            title: `税费查询，点击查看详情`,
            path: `/pages/tools/calculator/tax-query?productId=${this.productId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=税费查询-${this.productId}-${this.title}`,
        }
    },

    onShareTimeline() {
        return {
            title: `税费查询，点击查看详情`,
            query: `productId=${this.productId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=税费查询-${this.productId}-${this.title}`
        }
    },

    onLoad(options) {
        const that = this;
        let { productId = '', title = '', puid = '', share = false } = options;

        //朋友圈进入小程序快照场景
        if (this.scene == 1154) return;

        this.productId = productId ? productId : '';
        this.share = isBoolean(share);
        this.title = title ? title : '';
        this.start_time = (new Date()).getTime();
        if (puid) {
            this.setPuid(puid)
        }
        uni.$check_and_login(function() {
            that.init()
        });
    },
    onPageScroll() {
        const that = this;
        that.scrollAnimate = true;
        this.$u.debounce(function () {
            that.scrollAnimate = false;
        }, 500);
    },
    methods: {
        ...mapActions(useConfigStore, ['setPuid']),

        async init() {
            try {
                //绑定客户
                // await dispatchClient({
                //     share: this.share,
                //     puid: this.puid,
                //     pid: this.productId
                // });

                // if (this.puid && this.puid !== this.userInfo.id) {
                //     let sellInfoRes = await getSellerInfoById({ id: this.puid });
                //     if (sellInfoRes.status === 0) {
                //         if (sellInfoRes.detail.product_id) {
                //             this.recommendAdviser = sellInfoRes.detail;
                //         }
                //     }
                // }
            } catch (error) { }
        },

        //切换新房/二手房
        changeType(row) {
            this.type = row.type
        },

        //新房购房性质确认
        confirmBuyType(e) {
            this.houseTypeIndex = Number(e.detail.value);
        },

        //二手房转让年限选择确认
        confirmSecZhuanYears(e) {
            this.secYearsIndex = Number(e.detail.value);
        },

        //二手房是否唯一住宅选择确认
        confirmSecOnce(e) {
            this.secOnceIndex = Number(e.detail.value);
        },

        submit() {
            this.$refs.uForm.validate().then(valid => {
                if (valid) {
                    this.calcTaxes();
                }
            });
        },

        //统计所有税费跳转
        async calcTaxes() {
            //增值税
            let zengTaxes = await calcZengTaxes({
                overTwoYears: this.secZhuanOptions[this.secYearsIndex].value !== 'withinTwo',
                sellPrice: this.form.price * 10000,
                buyPrice: this.form.buyPrice * 10000
            })

            //个税
            let geRenTaxes = await calcGeRenTaxes({
                isOnlyOne: this.secOnceOptions[this.secOnceIndex].value,
                overTwoYears: this.secZhuanOptions[this.secYearsIndex].value !== 'withinTwo',
                isFiveYears: this.secZhuanOptions[this.secYearsIndex].value !== 'overFive',
                sellPrice: this.form.price * 10000,
                buyPrice: this.form.buyPrice * 10000
            });

            //契税
            let qiShuiTaxes = await qiTaxes({
                isFirst: this.houseNature[this.houseTypeIndex].value,
                size: this.form.size,
                overTwoYears: this.secZhuanOptions[this.secYearsIndex].value !== 'withinTwo',
                sellPrice: this.form.price * 10000,
                buyPrice: this.form.buyPrice * 10000
            });

            //维修基金
            let weiXiuJJTaxes = weiXiuTaxes({
                hasLift: this.form.hasLift,
                size: this.form.size
            });

            //售出单价
            const sellPrice = getBit(this.form.price * 10000 / this.form.size);

            uni.navigateTo({
                url: `/pages/tools/calculator/tax-query-result?size=${this.form.size}&buyAmount=${this.form.buyPrice}&sellAmount=${this.form.price}&sellPrice=${sellPrice}&isFirst=${this.houseNature[this.houseTypeIndex].value}&isOnlyOne=${this.secOnceOptions[this.secOnceIndex].value}&hasLift=${this.form.hasLift}&houseType=${this.type}&zengTaxes=${zengTaxes}&geRenTaxes=${geRenTaxes}&qishui=${qiShuiTaxes}&wxjjMoney=${weiXiuJJTaxes}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    min-height: 100vh;
    overflow: hidden;
    line-height: 1;

    .itemBody {
        justify-content: flex-end;
    }

    .tabs {
        border-bottom: 1rpx solid rgba(0, 0, 0, .05);

        .tab {
            flex: 1;

            .txt {
                height: 100rpx;
                line-height: 100rpx;
            }
        }

        .active {
            font-size: 36rpx;
            font-weight: bold;

            .txt {
                border-bottom: 4rpx solid $theme-color;
            }
        }
    }
    .formBody{
        padding: 0 28rpx;
    }

    .formItemCon {
        justify-content: space-between;

        .inpBox {
            width: calc(100% - 100rpx);
        }

        .unit {
            width: 100rpx;
            text-align: right;
        }
    }

    .radioWrap {
        justify-content: flex-end;
    }

    .switchBtn {
        vertical-align: middle;
    }

    .submitBtn {
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 10rpx;
        margin-top: 70rpx;
        text-align: center;
    }

    .tips {
        margin-top: 40rpx;
        line-height: 1.5;
    }
}
</style>
